<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的宠物</title>
    <link rel="stylesheet" href="/stylesheets/xiuxiu.css">
    <link rel="stylesheet" href="/stylesheets/personnal.css">
    <!--<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>-->
    <script src="/js/jquery-1.8.3.js"></script>
    <script src="/javascripts/two-sports.js"></script>
</head>
<body>
<%include nav.html%>
<div class="personnal_container">
    <div class="person_left">
        <div class="left_icon">
            <img src="/images/dog_icon.png" alt="" style="width: 120px;height: 120px">
        </div>
        <ul>
            <a href="/users"><li>查看用户信息</li></a>
            <a href="/users/apply_foster"><li>申请寄养家庭</li></a>
            <a href="/users/mypet"> <li class="bgcolor">我的宠物</li></a>
            <a href="/users/collection"> <li>宠物故事</li></a>
            <a href="/users/myorder"><li>我的订单</li></a>
        </ul>
    </div>
    <div class="person_right">
        <div class="editor_container">
            <div class="editor_header">
                <h3>宠物列表</h3>
            </div>
            <div class="mypet_container scrollbar">
                <div class="mypet_header">
                    <span  id="addpet_btn" onclick=addpet()>添加宠物</span>
                </div>
                <div class="order_content" style="background-color: #b7b7b7">
                    <%
                    for(var i in pet){
                    %>
                    <form  class="del-pet"  role="form" method="post">
                        <div class="pet_list">
                            <div class="order_header">
                                <div class="order_number">
                                    编号：
                                    <%=pet[i].petno%>
                                </div>
                                <div class="trading_time" style="text-align: right">
                                    <input type="text" hidden value="<%=pet[i].petno%>" name="petno">
                                    <input type="submit" value="删除" class="default">
                                </div>
                            </div>
                            <div class="order_service">
                                <div class="order_service_list">宠物图片</div>
                                <div class="order_service_list">宠物名</div>
                                <div class="order_service_list1">宠物简介</div>
                            </div>
                            <div class="order_service">
                                <div class="order_service_list">
                                    <img src="/pets/<%=pet[i].varietieno%>.jpg" alt="" class="pet-img">
                                </div>
                                <div class="order_service_list"><%=pet[i].varietiename%></div>
                                <div class="order_service_list1"><%=pet[i].sketch%></div>
                            </div>
                        </div>

                    </form>
                    <%}%>
                </div>
            </div>
        </div>
    </div>
</div>
<!--模态窗-->
<div class="modal_address" id="modal_addpet">
    <div class="modal_inner" style="width: 800px;min-height: 600px">
        <div class="modal_header">
            <div class="header_info" >
                添加宠物
            </div>
            <div class="header_close">
                <div onclick="addpet()" class="addpet_cursor">
                    <img src="/images/close.png" alt="">
                </div>
            </div>
        </div>
        <div class="modal_content">
            <form id="pet-form"  role="form" method="post">
                <div class="modal_row">
                    <div class="modal_col1">宠物类型:</div>
                    <div class="modal_col2" id="pet_varietie">
                        <select id="mySelect0">
                            <option value="0">请选择宠物分类</option>
                        </select>
                        <select id="mySelect1">
                            <option value="0">请选择宠物品种</option>
                        </select>
                        <input type="text" name="varietie" id="varietie">
                    </div>
                </div>
                <div class="modal_row">
                    <div class="modal_col1">性别:</div>
                    <div class="modal_col2">
                        <input name="sex" type="radio" value="1" required>♂男生
                        <input name="sex" type="radio" value="2" required>♀女生
                    </div>
                </div>
                <div class="modal_row">
                    <div class="modal_col1">是否绝育:</div>
                    <div class="modal_col2">
                        <input type="radio" name="sterilization" required>是
                        <input type="radio" name="sterilization" required>否
                    </div>
                </div>
                <div class="modal_row">
                    <div class="modal_col1">生日:</div>
                    <div class="modal_col2">
                        <select id="mySelect2">
                            <option value="">请选择</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952
                        </option>
                        </select>年
                        <input type="text" hidden name="year" id="year">
                        <select id="mySelect3">
                            <option value="">请选择</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12
                        </option>
                        </select>月
                        <input type="text" hidden name="month" id="month">
                        <select  id="mySelect4">
                            <option value="">请选择</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12
                        </option></option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24
                        </option><option value="25"2>5</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31
                        </select>日
                        <input type="text" hidden name="day" id="day">
                    </div>
                </div>
                <div class="modal_row">
                    <div class="modal_col1">体重:</div>
                    <div class="modal_col2">
                        <input type="text" name="weight">公斤(kg)
                    </div>
                </div>
                <div class="modal_row" style="min-height:200px">
                    <div class="modal_col1">宠物简介:</div>
                    <div class="modal_col2">
                        <textarea placeholder="宠物简介描述" required></textarea>
                    </div>
                </div>
                <div class="modal_row">
                    <div class="modal_col1">&nbsp;</div>
                    <div class="modal_col2">
                        <button type="submit" class="btn btn-default">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<%include footer.html%>

<script>
$(function(){
    $('#varietie').val('中国狸花猫');
    $('#varietie').css('display','none');
    $('#pet_varietie').change(function(){
        $('#varietie').val(getIndex('mySelect1'));
    });
    $('#mySelect2').change(function(){
        $('#year').val(getIndex('mySelect2'));
    });
    $('#mySelect3').change(function(){
        $('#month').val(getIndex('mySelect3'));
    });
    $('#mySelect4').change(function(){
        $('#day').val(getIndex('mySelect4'));
    });
    $('#pet-form').submit(function () {
        $.ajax({
            type: 'POST',
            url: '/pet/addpet',
            data:$('#pet-form').serialize(),
            dataType:'json',
            success: function (data) {
                if(data.res=="1"){
                    location.href='/users/mypet';
                }
            },
            error: function (data) {
                alert(data);
            }
        });
        return false;
    });
    $('.del-pet').submit(function () {
        $.ajax({
            type: 'POST',
            url: '/pet/del',
            data:$(this).serialize(),
            dataType:'json',
            success: function (data) {
                if(data.res=="1"){
                    location.href='/users/mypet';
                }
            },
            error: function (data) {
                alert(data);
            }
        });
        return false;
    })
})
</script>
<script>
    function addpet(){
        var e1 = document.getElementById('modal_addpet');
        e1.style.visibility =  (e1.style.visibility == "visible"  ) ? "hidden" : "visible";
    }
    function getIndex(id)
    {
        //从document对象中，获取select标签
        var a=document.getElementById(id);
        //select标签获取的值其实是一个数组--a.options[]; 然后，选定项的下标是--a.selectedIndex
        var b=a.options[a.selectedIndex].value;
        return b;
    }
</script>
</body>
</html>